import React from 'react'

function ListItem(props) {
  // const value = props.value
  // return (
  //   // 错误！你不需要在这里指定 key：
  //   <li key={value.toString()}>{value}</li>
  // )
  // 正确！这里不需要指定 key：
  return <li>{props.value}</li>
}

export default function index(props) {
  const numbers = props.numbers
  const listItems = numbers.map(number => (
    // 错误！元素的 key 应该在这里指定：
    // <ListItem value={number} />
    // 正确！key 应该在数组的上下文中被指定
    <ListItem key={number.toString()} value={number} />
  ))
  return <ul>{listItems}</ul>
}

// export default function index(props) {
//   const numbers = props.numbers
//   const listItems = numbers.map(number => (
//     <li key={number.toString()}>{number}</li>
//   ))
//   return <ul>{listItems}</ul>
// }
